<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;left:20px;top:15px;background-color:white;box-shadow:0 0 3px gray;">
          <el-button @click="绘制面要素" type="primary" plain>绘制面要素</el-button>
          <el-button @click="绘制分割线" type="primary" plain>绘制分割线</el-button>
          <el-button @click="重置" type="danger" plain>重置</el-button>
        </el-main>
   </div>
</template>

<script setup>
import * as 天地图 from '../天地图'
import {onMounted} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import * as geometryEngine from "@arcgis/core/geometry/geometryEngine.js"
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
var map,view,graphicsLayer,sketchViewModel
var graphics=[]
const 绘制面要素=()=>{
    sketchViewModel.create("polygon",{mode:"click"})
}
const 绘制分割线=()=>{
    sketchViewModel.create("polyline",{moe:"click"})
}
const 重置=()=>{
    graphics=[]//暂时存放切割得到的图形集合
    graphicsLayer.graphics.removeAll()
}
onMounted(()=>{
    graphicsLayer=new GraphicsLayer()//创建图形图层
    map=new Map({
        basemap:{
            baseLayers:天地图.天地图矢量
        },
        layers:[graphicsLayer]
    })
    view=new MapView({
        map:map,
        container:"viewDiv",
        center:[120.4,36.1],
        zoom:15,
        constraints:{
            rotationEnabled:false,
            maxScale:2000
        }
    })
    view.ui.remove(["zoom","attribution"])
    sketchViewModel=new SketchViewModel({//创建绘图工具小部件
        view:view,//绑定视图对象
        layer:graphicsLayer//绑定图形图层对象
    })
    sketchViewModel.on("create",(event)=>{
        if(event.state==="complete"){
            if(event.graphic.geometry.type==="polyline"){//如果绘制了线要素,则执行切割
                for(let graphic of graphicsLayer.graphics.items){//遍历图形图层中的图形对象
                    if(graphic.geometry.type==="polygon"){//如果遍历到的图形类型是多面体,则执行分割
                        if(geometryEngine.cut(graphic.geometry,event.graphic.geometry).length>=2){
                            //判断是否进行了有效分割,如果进行了有效分割,则返回图形数组,且至少包含两个图形
                            for(let item of geometryEngine.cut(graphic.geometry,event.graphic.geometry)){//遍历切割得到的几何的集合
                                var graphic_={//基于几何创建图形
                                    symbol:sketchViewModel.polygonSymbol,
                                    geometry:item
                                }
                                graphics.push(graphic_)//将图形添加到graphics数组中
                            }
                        }else{//没有执行切割,则返回原图形
                            graphics.push(graphic)
                        }
                    }
                }
                graphicsLayer.graphics.removeAll()//移除graphicsLayer图层原来的所有图形
                graphicsLayer.graphics.addMany(graphics)//将graphics中的图形集合添加到图形图层中
                graphics=[]//清空graphics
            }
        }
    })
})
</script>

<style scoped>
#container,#viewDiv{
width:100%; height:100%; padding:0;margin:0;
}
span{
    vertical-align: middle;
    white-space: pre-line;
}
</style>
  